<template>
  <div class="edit">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>{{title}}</span>
        <el-button @click="$router.go(-1)" style="float: right; padding: 3px 0" type="text">返回</el-button>
      </div>

      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="登录账号" prop="userName">
          <el-input v-model="form.userName" placeholder="请输入登录账号" />
        </el-form-item>
        <el-form-item label="昵称" prop="nickName">
          <el-input v-model="form.nickName" placeholder="请输入昵称" />
        </el-form-item>
        <el-form-item label="手机号" prop="phonenumber">
          <el-input v-model="form.phonenumber" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" :row="4" v-model="form.remark" placeholder="请输入备注" />
        </el-form-item>

        <el-form-item label="权限分组" prop="roleId">
          <el-select v-model="form.roleId">
            <el-option
              v-for="item in roleList"
              :key="item.roleId"
              :label="item.roleName"
              :value="item.roleId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">确定</el-button>
          <el-button @click="cancel">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import {
  getAdminUser,
  addAdminUser,
  updateAdminUser
} from "@/api/system/adminUser";
import { listAllRole } from "@/api/system/role";

export default {
  name: "AdminUserEdit",
  components: {},
  data() {
    return {
      roleList: [],
      dynamicTags: [],
      inputVisible: false,
      inputValue: "",
      title: "添加管理员",
      // 表单参数
      form: {
        userName: "",
        phonenumber: "",
        email: "",
        password: "",
        roleId: "",
        remark: ""
      },
      // 表单校验
      rules: {
        userName: [
          { required: true, message: "请输入登录账号", trigger: "blur" }
        ],
        nickName: [
          { required: true, message: "请输入昵称", trigger: "blur" }
        ],
        email: [
          { required: true, message: "邮箱地址不能为空", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        phonenumber: [
          { required: true, message: "手机号码不能为空", trigger: "blur" },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        roleId: [{ required: true, message: "请选择权限分组", trigger: "blur" }]
      }
    };
  },
  mounted() {
    this.getEditInfo();
    this.getRoleList();
  },
  methods: {
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    clearImageValidate() {
      this.rules.newsCover = [];
      this.$refs["form"].clearValidate("newsCover");
    },
    getEditInfo() {
      const id = this.$route.query.id;
      if (id) {
        getAdminUser(id).then(response => {
          this.form = response.data;
        });
        this.title = "修改管理员";
      }
    },
    getRoleList() {
      listAllRole().then(res => {
        this.roleList = res.data || [];
        this.roleList = this.roleList.filter(item => item.roleId !== 1); // 过滤超级管理员
      });
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.userId != null) {
            updateAdminUser(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
                this.$router.go(-1);
              }
            });
          } else {
            addAdminUser({
              ...this.form,
              userType: "00"
            }).then(response => {
              if (response.code === 200) {
                this.msgSuccess("添加成功");
                this.$router.go(-1);
              }
            });
          }
        }
      });
    },
    // 重置按钮
    cancel() {
      this.getEditInfo();
      this.resetForm("form");
    }
  }
};
</script>
<style lang="scss" scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

.item {
  font-size: 14px;
  padding: 18px 0;
  span:first-child {
    width: 90px;
    display: inline-block;
    text-align: right;
  }
  span:last-child {
    margin-left: 20px;
    display: inline-block;
  }
  .image {
    width: 100px;
    height: 100px;
    margin-right: 20px;
  }
}
.deatil {
  display: flex;
  .avatar {
    width: 140px;
    height: 140px;
    margin-right: 20px;
    .img {
      height: 100%;
    }
    /deep/ img {
      border-radius: 50%;
    }
  }
  .info {
    flex: 1;
  }
}
</style>
